<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    
    console.time('interval')
    
    var arr = [];
    
    for (var i = 1; i <= 1000; i++) {
      arr.push(i) //假设arr装载了100个好友数据
    }
    
    
    var timeChunk = function (arr, fn, count) {
      var obj, t;
      var len = arr.length;

      var start = function () {
        for (var i = 0; i < Math.min(count || 1, arr.length); i++) {
          var obj = arr.shift();
          fn(obj)
        }
      };

      return function () {
        t = setInterval(function () {
          if (arr.length === 0) {
            return clearInterval(t);
          }
          start()
        }, 200)
      }
    }

    var renderFriendList = timeChunk(arr, function (n) {
      var div = document.createElement('div');
      div.innerHTML = n;
      document.body.appendChild(div)
    }, 8)
    
    renderFriendList();
    console.timeEnd('interval')
  </script>

</body>

</html>